<template>
    <!--评论内容开始-->
    <div class="photo-bottom">
        <ul>
            <li class="photo-comment">
                <div>
                    <span>提交评论</span>
                    <span><a @click="goback()">返回</a></span>
                </div>
            </li>
            <li class="txt-comment">
                <textarea v-model="msg"></textarea>
            </li>
            <li>
                <mt-button type="primary" size="large" @click="sendComment()">发表评论按钮</mt-button>
            </li>
            <li class="photo-comment">
                <div>
                    <span>评论列表</span>
                    <span>{{comments.length}}条评论</span>
                </div>
            </li>
        </ul>
        <ul class="comment-list">
            <li v-for="(comment,index) in comments" :key="index">
                <!--匿名用户1：大家好 2014-01-04-->
                {{comment.userName}}:<br/>
                {{comment.content}}<br/>
                {{comment.addTime | convertDate}}
            </li>
        </ul>
        <mt-button size="large" @click="loadByPage()">加载更多按钮</mt-button>
    </div>
    <!--评论内容结束-->
</template>

<script>
    export default {
        name: "comment",
        data() {
            return {
                comments: [],//存放评论
                pageIndex: 0,//页码
                msg: '',//评论发表
            }
        },
        created() {
            //评论操作开始
            this.loadFirst();
            //评论操作结束
        },
        props: ['tid'],
        methods: {
            //加载第一页评论
            loadFirst() {
                // console.log(this.tid)
                this.$ajax.get('comments/findConmments/' + this.tid + '/0')
                    .then(res => {
                        this.comments = res.data.message.content;
                    })
                    .catch(err => {
                        console.log(err)
                    })
            },
            //加载更多
            loadByPage() {
                    this.$ajax.get('comments/findConmments/' + this.tid + '/' + (++this.pageIndex))
                        .then(res => {
                            //追加
                            this.comments = this.comments.concat(res.data.message.content);
                        })
                        .catch(err => {
                            console.log(err)
                        })
                },
            //发表评论
            sendComment() {
                //发表评论请求后台
                //Post 请求
                this.$ajax.post('comments/addComments',
                    {
                        content: this.msg,
                        topicId: this.tid,
                        userName:''
                    }
                    // ,
                    // {
                    //     header:{
                    //         // 'content-type':'application/x-www-form-urlencoded'//默认头
                    //         'content-type':'application/json;charset=UTF-8'
                    //     }
                    // }
                    )
                    .then(res => {
                        //获取最新的第一页数据
                        this.loadFirst();
                         this.msg=''
                    })
                    .catch(err => {
                        console.log(err)
                    })

            },
            goback() {
                this.$router.go(-1);
            }
        }
    }
</script>

<style scoped>
    /*评论内容样式开始*/
    .photo-comment > div span:nth-child(1) {
        float: left;
        font-weight: bold;
        margin-left: 5px;
    }

    .photo-comment > div span:nth-child(2) {
        float: right;
    }

    .photo-comment {
        height: 30px;
        border-bottom: 1px solid rgba(0, 0, 0, 0.4);
        line-height: 30px;
        margin-bottom: 5px;
    }

    .txt-comment {
        padding: 5px 5px;
    }

    .txt-comment textarea {
        margin-bottom: 5px;
    }

    .comment-list li {
        border-bottom: 1px solid rgba(0, 0, 0, 0.2);
        padding-bottom: 5px;
        margin-bottom: 5px;
        padding-left: 5px;
    }

    li {
        list-style: none;
    }

    ul {
        margin: 0;
        padding: 0;
    }

    /*评论内容样式结束*/
</style>